<!--
 * @Description:
 * @Date: 2024-05-16 10:36:10
 * @LastEditTime: 2024-06-06 11:45:22
-->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '公益诉讼',
    navigationBarTextStyle: 'white', //标题栏字体颜色
    navigationBarBackgroundColor: '#0063AF', //标题栏背景色(纯色)
  },
}
</route>

<template>
  <view class="publicBenefit w-screen h-screen box-border bg-#F4F5F9">
    <wd-notice-bar
      text="提交后，处理结果请前往首页【我的申请】查看~"
      prefix="check-outline"
      type="info"
      custom-class="space"
    />
    <image class="w-screen h-250rpx" :src="banner" mode="scaleToFill" />
    <view class="w-90% mx-auto translate-y--8% rounded-20rpx">
      <view
        class="flex items-center p-20rpx mb-20rpx bg-#fff rounded-20rpx overflow-hidden"
        v-for="(item, index) in benefit"
        :key="index"
        @click="handleDenefit(item.title, item.type)"
      >
        <view
          :style="{ background: item.color }"
          class="p-15rpx mr-20rpx rounded-20rpx overflow-hidden"
        >
          <image class="w-60rpx h-60rpx" :src="item.src" mode="scaleToFill" />
        </view>

        <text class="font-550">{{ item.title }}</text>
        <view class="flex-1 text-right">
          <wd-icon name="arrow-right" size="22px" color="#BDBDBD"></wd-icon>
        </view>
      </view>
      <!-- <wd-button
        class="bg-#0A4484 mx-20rpx"
        :round="false"
        type="primary"
        size="large"
        @click="handleSubmit"
        block
      >
        提交记录
      </wd-button> -->
    </view>
  </view>
</template>
<script lang="ts" setup>
import icon1 from '../../../static/menu/icon1.png'
import icon2 from '../../../static/menu/icon2.png'
import icon3 from '../../../static/menu/icon3.png'
import icon4 from '../../../static/menu/icon4.png'
import banner from '../../../static/images/banner.jpg'
const benefit = ref([
  {
    title: '生态环境',
    color: '#7FC48D',
    src: icon1,
    type: 1,
  },
  {
    title: '国有财产保护',
    color: '#71A6B8',
    src: icon2,
    type: 2,
  },
  {
    title: '安全生产',
    color: '#CA7271',
    src: icon3,
    type: 3,
  },
  {
    title: '其它',
    color: '#8EB4EE',
    src: icon3,
    type: 4,
  },
])
function handleDenefit(title, type) {
  uni.navigateTo({
    url: `/pages/menu/notice/index?title=${title}&type=${type}&menu=${'公益诉讼'}`,
  })
}
function handleSubmit() {
  uni.navigateTo({
    url: `/pages/menu/subRecord/index?menu=${'公益诉讼'}`,
  })
}
</script>
<style lang="scss" scoped>
::v-deep .wd-button {
  margin: 0 10rpx;
  background: #409cd9 !important;
}

// ::v-deep .wd-notice-bar__wrap {
//   font-size: 30rpx !important;
// }
</style>
